<template>
  <div>
    <el-row type="flex" justify="center">
      <el-input v-model="numberString" size="mini"></el-input>
      <el-button type="primary" size="mini" @click="onSubmit" :disabled="!canStartAnotherSort">开始排序</el-button>
    </el-row>
    <div id="myCountChart" :style="{width: '600px', height: '300px'}"></div>
    <div id="myResultChart" :style="{width: '600px', height: '300px'}"></div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      countFinished: false,
      canStartAnotherSort: true,
      countIndex: 0,
      myCountChart: undefined,
      myResultChart: undefined,
      numberString: '9,8,7,6,5,6,8,7',
      numbers: [],
      countSeriesData: [],
      countXData: [],
      countOption: {
        xAxis: {
          type: 'category',
          data: [],
          animationDuration: 0,
          animationDurationUpdate: 400,
        },
        yAxis: {
          type: 'value'
        },
        series: [{
          // realtimeSort: true,
          data: [{
            value: undefined,
            itemStyle: {
              color: '#6e7074'
            }
          }],
          type: 'bar',
          label: {
            show: true,
            position: 'top'
          }
        }],
        animationDuration: 0,
        animationDurationUpdate: 400
      },
      resultXData: [],
      resultSeriesData: [],
      resultOption: {
        xAxis: {
          type: 'category',
          data: [],
          animationDuration: 0,
          animationDurationUpdate: 400,
        },
        yAxis: {
          type: 'value'
        },
        series: [{
          // realtimeSort: true,
          data: [{
            value: undefined,
            itemStyle: {
              color: '#6e7074'
            }
          }],
          type: 'bar',
          label: {
            show: true,
            position: 'top'
          }
        }],
        animationDuration: 0,
        animationDurationUpdate: 400
      }
    }
  },
  components: {},
  mounted() {
    this.initialEcharts()
  },
  watch: {
    countSeriesData: {
      handler(val, oldVal) {
        this.setCountOption()
      },
      // immediate:true,
      deep: true
    },
    countFinished: {
      handler(val, oldVal) {
        if (val) {
          this.getResult()
        }
      }
    },
    resultSeriesData: {
      handler(val, oldVal) {
        this.setResultOption()
      },
      // immediate:true,
      deep: true
    },
  },
  created() {

  },
  methods: {
    getResult() {
      this.getResultXData()
      this.getResultSeriesData()
    },
    getResultSeriesData() {
      let i = 0, j = 0, key = 0, times = 0
      let outLoop = () => {
        if (i === this.countXData.length) {
          this.canStartAnotherSort = true
          return
        }
        setTimeout(() => {
          key = this.countXData[i]
          times = JSON.parse(JSON.stringify(this.countSeriesData[i].value))
          j = 0
          innerLoop()
        }, 400)
      }

      let innerLoop = () => {
        if (j === times) {
          setTimeout(() => {
            i++;
            outLoop()
          }, 400)
        } else {
          setTimeout(() => {
            this.countSeriesData[i].value--
            this.resultSeriesData.push({
              value: key, itemStyle: {
                color: '#6e7074'
              }
            })
            j++;
            innerLoop()
          }, 400)
        }
      }
      outLoop()
    },
    getResultXData() {
      for (let i = 0; i < this.numbers.length; i++) {
        this.resultXData.push(i)
      }
      this.resultOption.xAxis.data = this.resultXData
    },
    onSubmit() {
      this.canStartAnotherSort = false
      this.resetAllData()
      this.dealWithInput()
    },
    resetAllData() {
      this.numbers = []
      this.countXData = []
      this.countSeriesData = []
      this.resultXData = []
      this.resultSeriesData = []
      this.countOption.xAxis.data = []
      this.resultOption.xAxis.data = []
    },
    dealWithInput() {
      this.getNumbers()
      this.getCountXData()
      this.getCountSeriesData()
      this.count()
    },
    count() {
      let i = 0, j = 0

      let outLoop = () => {
        if (i > this.numbers.length - 1) {
          this.countFinished = true
          return
        }
        j = 0
        innerLoop()
      }

      let innerLoop = () => {
        if (j > this.countSeriesData.length - 1) {
          outLoop()
        }

        if (this.numbers[i] === this.countXData[j]) {
          this.countSeriesData[j].value++;
          setTimeout(() => {
            i++;
            outLoop()
          }, 400)
        } else {
          setTimeout(() => {
            j++;
            innerLoop()
          }, 400)
        }
      }
      outLoop()
    },
    setResultOption() {
      this.resultOption.series[0].data = this.resultSeriesData
      this.myResultChart.setOption(this.resultOption)
    },
    setCountOption() {
      this.countOption.series[0].data = this.countSeriesData
      this.myCountChart.setOption(this.countOption)
    },
    // 构建最初的数据
    getCountSeriesData() {
      this.countSeriesData = []
      for (let index = 0; index < this.countXData.length; index++) {
        this.countSeriesData.push({
          value: 0,
          itemStyle: {
            color: '#6e7074'
          }
        })
      }
    },
    // 获取原始图的x坐标
    getCountXData() {
      this.countXData = []
      let min = this.numbers[0], max = this.numbers[0]
      for (let index = 0; index < this.numbers.length; index++) {
        if (this.numbers[index] > max) {
          max = this.numbers[index]
        }
        if (this.numbers[index] < min) {
          min = this.numbers[index]
        }
      }
      for (let index = min; index < max + 1; index++) {
        this.countXData.push(index)
      }
      this.countOption.xAxis.data = this.countXData
    },
    // 把输入转为数字
    getNumbers() {
      this.numbers = this.numberString.split(',').map(x => parseInt(x)).filter(m => this.isRealNum(m))
    },
    // 判断输入是否为数字
    isRealNum(value) {
      if (value === '' || value === null) {
        return false
      }
      return !isNaN(value) && typeof value === 'number'
    },
    // 初始化两个图
    initialEcharts() {
      var myCountChartDom = document.getElementById('myCountChart');
      var myCountChart = this.$echarts.init(myCountChartDom);
      this.myCountChart = myCountChart

      var myResultChartDom = document.getElementById('myResultChart');
      var myResultChart = this.$echarts.init(myResultChartDom);
      this.myResultChart = myResultChart
    }
  }
}
</script>
<style>

</style>
